<template>
    <div class="layout" style="height: 100%;">
        <el-tabs v-model="activeName2" type="border-card" style="height: 68%;">
            <el-tab-pane label="浏览" name="first" style="height: 100%;">
              <div class="container">
                <el-row class="tac" :gutter="20">

                <!-- <Row type="flex" style="height: 100%;"> -->
                   <el-col :span="5" class="tree">
                        <!--树形导航 -->
                        <div class="dataSource">
                            <el-tree class="elTree" :data="treedata"  node-key="id" default-expand-all :expand-on-click-node="false" :props="defaultProps" @node-click="handleNodeClick" ></el-tree>
                        </div>
                        <div class="layout-tree-button buttonGroup">
                          <el-button type="primary" plain icon="el-icon-plus" size="small"  @click="centerDialogVisible = true" >增加</el-button>
                          <el-button type="primary" plain icon="el-icon-minus" size="small">删除</el-button>
                        </div>
                   </el-col>
                   <!-- <el-col :span="1">
                     &nbsp;
                   </el-col> -->
                   <el-col :span="19">
                    <div class="layout-right">

                      <!-- 表格1区域-->
                    <div class="breadcrumb">
                       <span><dynamicbread :breadData="breadData1" ></dynamicbread></span>
                      <!--<el-breadcrumb separator-class="el-icon-arrow-right" class="des">

                        <el-breadcrumb-item >业务系统</el-breadcrumb-item>
                        <el-breadcrumb-item >用户订单管理库</el-breadcrumb-item>
                        <el-breadcrumb-item >用户信息表</el-breadcrumb-item>
                      </el-breadcrumb>-->
                    </div>



                    <div class="decorationLine"></div>
                    <div class="table1">
                      <el-row>
                        <span class="des">基本信息</span>
                      </el-row>
                        <br/>
                      <el-row>
                          <span><freeTable :tableData="tableData1" width="100%"></freeTable></span>
                      </el-row>
                    </div>

                      <div class="decorationLine"></div>
                      <!-- 表格2区域-->
                      <div class="table2">
                        <el-row>
                          <span class="des">属性信息</span>
                        </el-row>
                        <el-row>
                          <el-table :data="attributeData" border highlight-current-row  style="width:100%; margin-top:0.5%" max-height="200">
                            <el-table-column  prop="fieldname" label="字段名" width="150" color="#A0522D" align="center">
                            </el-table-column>
                            <el-table-column  prop="defaultvalue" label="默认值" width="150"  align="center">
                            </el-table-column>
                            <el-table-column prop="type" label="类型" width="100" align="center">
                            </el-table-column>
                            <el-table-column prop="isprimarykep" label="是否主键" width="100" align="center">
                            </el-table-column>
                            <el-table-column prop="isforeignkey" label="是否外键" width="100" align="center">
                            </el-table-column>
                            <el-table-column prop="isempty" label="是否为空" width="100" align="center">
                            </el-table-column>
                            <el-table-column prop="describe" label="业务描述" width="200" align="center">
                            </el-table-column>
                            <el-table-column fixed="right" label="操作" width="120" align="center">
                              <template slot-scope="scope">
                                <el-button type="text" size="small" @click="edit(scope.row)">
                                修改
                                </el-button>
                                <el-button type="text" size="small" @click="deletefield(scope.row)">
                                删除
                                </el-button>
                              </template>
                            </el-table-column>
                            <el-table-column fixed="right" label="实例" width="70" align="center">
                              <template slot-scope="scope">
                                <el-popover trigger="hover" placement="top">
                                  <font size="2">最新实例数据：</font>
                                  <p>实例1: {{ scope.row.example1}}</p>
                                  <p>实例2: {{ scope.row.example2}}</p>
                                  <p>实例3: {{ scope.row.example3}}</p>
                                  <p>实例4: {{ scope.row.example4}}</p>
                                  <p>实例5: {{ scope.row.example5}}</p>
                                  <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium">实例</el-tag>
                                  </div>
                                </el-popover>
                              </template>
                            </el-table-column>
                          </el-table>
                        </el-row>
                      </div>
                      <!-- 表格2的修改按钮弹窗-->
                      <el-dialog width="40%" title="属性信息修改" :visible.sync="dialogFormVisible" size="tiny">
                        <el-form :model="form">
                          <el-form-item label="字段名称" :label-width="FormLableWidth">
                            <el-input v-model="form.fieldname" auto-complete="off" disabled></el-input>
                          </el-form-item>

                          <el-form-item label="业务描述" :label-width="FormLableWidth">
                            <el-input v-model="form.serviceDescription" auto-complete="off"></el-input>
                          </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                          <el-button @click="dialogFormVisible = false">取 消</el-button>
                          <el-button type="primary" @click="editAtrributePost()">确 定</el-button>
                        </span>
                      </el-dialog>
                      <!-- 表格2的删除按钮弹窗-->
                      <el-dialog width="40%" title="属性信息删除" :visible.sync="dialogFormVisible1" size="tiny">
                        <el-form :model="deleteform">
                          <span>确认删除吗</span>
                        </el-form>
                          <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                            <el-button type="primary" @click="deletefieldPost()">确 定</el-button>
                          </span>
                      </el-dialog>
                      <!-- 表格2的提示弹窗-->
                      <el-dialog width="30%" title="提示" :visible.sync="dialogFormVisible2" size="tiny">
                        <span>{{information}}</span>
                        <span slot="footer" class="dialog-footer">
                          <el-button type="primary" @click="updateTable()">确 定</el-button>
                        </span>
                      </el-dialog>
                    </div>
                   </el-col>
                </el-row>
              </div>
            </el-tab-pane>

            <el-tab-pane label="查询" name="second">
                <!-- 查询板块-->
              <div class="layout-select">
                <div class="selectkey">
                 <span class="des">输入查询条件</span>
                 <el-input v-model="selectinfo"  placeholder="关键字" auto-complete="off" style="width:800px;"></el-input>
                <el-button type="primary" plain icon="el-icon-search"   @click="selectPost()">查找</el-button>
                </div>

              <div class="decorationLine"></div>
              <div class="layout-select-table">
                    <span class="des">查询结果</span>
                    <el-table :data="selectTable"  border highlight-current-row  style="width: 1020px;margin-top:10px;" max-height="250">
                        <el-table-column  prop="name" label="元数据名称"  color="#A0522D" align="center">
                        </el-table-column>
                        <el-table-column  prop="type" label="元数据类型"  align="center">
                        </el-table-column>
                        <el-table-column prop="describe" label="元数据业务描述" width="300" align="center">
                       </el-table-column>
                        <el-table-column prop="location" label="元数据位置" width="200" align="center">
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="150" align="center">
                            <template slot-scope="scope" >
                                <el-button type="text" size="small" @click="detail(scope.row)">详情 </el-button>
                                <el-button type="text" size="small" @click="selectDeleteSingle(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
              </div>
                <!-- 详情关系表元模型弹窗-->
                <!-- 详情弹窗-->
                <el-dialog width="45%" title="元数据详情" :visible.sync="dialogFormVisible5" >
                 <el-row>
                  <span><freeTable :tableData="tableData2" :tableStyle="{ width:'400px' } " align="center"></freeTable></span>
                 </el-row>
                 <span slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="dialogFormVisible7=true">修改</el-button>
                  <el-button  @click="dialogFormVisible6=true">删除</el-button>
                 </span>
               </el-dialog>
               <!-- 详情弹窗内删除-->
               <el-dialog width="40%" title="元数据删除" :visible.sync="dialogFormVisible6">
                <el-form :model="selectDeleteForm">
                  <span>确认删除吗</span>
                </el-form>
                  <span slot="footer" class="dialog-footer">
                   <el-button @click="dialogFormVisible6=false">取 消</el-button>
                   <el-button type="primary" @click="selectDeletePost()">确 定</el-button>
                  </span>
              </el-dialog>
              <!-- 详情弹窗内修改-->
              <el-dialog width="40%" title="属性信息修改" :visible.sync="dialogFormVisible7">
                <el-form :model="selectEditForm">
                  <el-form-item label="请输入业务描述" :label-width="FormLableWidth">
                    <el-input v-model="selectEditForm.serviceDescription" auto-complete="off"></el-input>
                  </el-form-item>
                </el-form>
                  <span slot="footer" class="dialog-footer">
                   <el-button @click="dialogFormVisible7=false">取 消</el-button>
                   <el-button type="primary" @click="selectEditPost()">确 定</el-button>
                  </span>
               </el-dialog>

                <!-- 查询区的提示弹窗-->
                <el-dialog width="30%" title="提示" :visible.sync="dialogFormVisible4" size="tiny">
                  <span>{{warning}}</span>
                  <span slot="footer" class="dialog-footer">
                    <el-button type="primary"  @click="selectUpdate()">确 定</el-button>
                  </span>
                </el-dialog>
            </el-tab-pane>
        </el-tabs>
        <el-dialog
                      title="新建关系表字段映元数据"
                      style="font-size:26px;"
                      :visible.sync="centerDialogVisible"
                      height="400"
                      width="70%"
                      center>
                      <p>


                <span class="addtablemap_font_style">
                    &nbsp;&nbsp;&nbsp;&nbsp;为数据仓库中的数据表字段指定对应的来源字段：
                </span><br/><br/>

                <p>
                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="addtablemap_font_style">数据仓库中的数据库&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <el-select v-model="databaseinwarehouse" placeholder="请选择" @blur="showtables_in_database()">
                      <el-option
                        v-for="item in database_in_warehouse"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
                </p><br/>

                      <!--@blur="showtFields_in_table()"-->
                  <p>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="addtablemap_font_style">数据库表&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </span>
                    <el-select v-model="databasetable" placeholder="请选择" @blur="showtFields_in_table()">
                      <el-option
                        v-for="item in database_table"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </p><br/><br/>

                  <!--表格部分编码-->
                  <el-table
                        :data="soursetogargetable"
                        align="center"

                        height="350">
                        <el-table-column
                          fixed="left"
                          prop="name"
                          label="字段名"
                          width="">
                        </el-table-column>
                        <el-table-column
                          fixed="left"
                          prop="describe"
                          label="业务名"
                          width="">
                        </el-table-column>
                        <el-table-column
                          prop="operation"
                          label="操作"
                          width="">
                        <template slot-scope="scope">
                            <el-button
                              type="primary"
                              @click="handleEdit(scope.$index, scope.row)">添加映射
                            </el-button>
                        </template>
                        </el-table-column>
                  </el-table>
              <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

        <!--内层dialog的显示-->
        <el-dialog title="数据库表字段与来源数据库表字段映射" :visible.sync="dialog_in_FormVisible"
        center>
        <el-form :model="formdata">

          <el-form-item label="来源系统" :label-width="formLabelWidth">
            <el-select v-model="formdata.source_system" placeholder="请选择活动区域" @blur="showsource_in_source()">
              <el-option
                    v-for="item in source_system"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="来源数据源" :label-width="formLabelWidth">
            <el-select v-model="formdata.source_datasource" placeholder="请选择活动区域" @blur="showdatabase_in_sourcedata()">
              <el-option
                    v-for="item in source_datasource"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="来源数据库" :label-width="formLabelWidth">
            <el-select v-model="formdata.source_database" placeholder="请选择活动区域" @blur="showdatatable_in_sourcedata()">
              <el-option
                    v-for="item in source_database"
                   :key="item.id"
                    :label="item.name"
                    :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="来源表" :label-width="formLabelWidth">
            <el-select v-model="formdata.source_table" placeholder="请选择活动区域" @blur="showdatafield_in_sourcedata()">
              <el-option
                    v-for="item in source_table"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="来源字段" :label-width="formLabelWidth">
            <el-select v-model="formdata.source_property" placeholder="请选择活动区域"  @blur="showdatadeclibse_in_sourcedata()">
              <el-option
                    v-for="item in source_property"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
              </el-option>
            </el-select>
             &nbsp;&nbsp;<el-button type="text" @click="showField_in_sourceTableExemple()">查看字段示例</el-button>
          </el-form-item>

          <el-form-item label="来源字段业务名" :label-width="formLabelWidth">
            <el-input v-model="form.source_servicename" auto-complete="off" placeholder="请填入来源字段业务名" value=""></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialog_in_FormVisible = false">取 消</el-button>
          <el-button type="primary" @click="startOperationMapper()">确 定</el-button>
        </div>
      </el-dialog>

      <!--示例展示的dialog-->


      <el-dialog title="字段示例展示" :visible.sync="dialogTable_Visible"
      center>
         <el-table :data="ExempleGridData"
         style="width: 100%;"
         height="250">
            <el-table-column property="example" label="示例展示" width="150"></el-table-column>
        </el-table>
      </el-dialog>
    </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
import freeTable from '@/components/comp/freeTable'
import dynamicbread from '@/components/comp/dynamicbread'
export default {
  components:{
  freeTable,
  dynamicbread
  },
  data () {
    return {

        tempRoure: '',
        input:'',
        activeName2:'first',//标签页默认值
        //导航栏树数据
        treedata:[],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        breadData1:[],

        tableData1:[],//基本信息表的参数

        attributeData:[],//属性信息表数据


        dialogFormVisible:false,//浏览版块修改弹窗
        dialogFormVisible1:false,//浏览版块删除弹窗
        dialogFormVisible2:false,//操作结果弹窗

        dialogFormVisible4:false,//查询区结果提示
        dialogFormVisible5:false,//查询区详情弹窗
        dialogFormVisible6:false,
        dialogFormVisible7:false,
        information:'提示',
        //浏览区修改弹窗
        form:{
          fieldid:'',
          fieldname:'',
          serviceDescription:''

        },
        FormLableWidth:'120px',
        //浏览区删除弹窗
        deleteform:{
          fieldID:''
        },
        //点击树节点的表id
        tableID:'',
        //查询结果表
        selectTable:[],
        //查询关键字
        selectinfo:'',
        //查询提示框内信息
        warning:'',
        //查询区详情弹窗内表
        tableData2:[],
        falg:'',//查询区暂存元模型类型
        metaid:'',//查询区暂存元数据id
        selectEditForm:{},
        selectDeleteForm:{},


        //添加模块的数据部分；

        sourcedataname:'',
        databaseinwarehouse:'',
        databasetable:'',
        centerDialogVisible: false,
        sourcedatabasevalue :'选项1',
        dialogTable_Visible: false,
        dialog_in_FormVisible: false,


           formdata: {

          propertyname: '',   //仓库中的字段名
          servicename: '',       //仓库中的业务名
         // delivery: false,
          //type: [],
          //resource: '',
          //desc: ''
          source_system:'',   //来源系统
          source_datasource:'',  //来源数据源
          source_database: '',   //来源数据库
          source_table: '',    //来源表
          source_property: '', //来源字段
          source_servicename: '' //来源字段业务名
        },
        formLabelWidth: '120px',

        source_system:[],
        source_datasource:[],
        source_database:[],
        source_table:[],
        source_property:[],
        sourcefiledescribe:'',
        ExempleGridData:[],



        database_in_warehouse: [],
        database_table: [],



        //映射表格数据展示
         soursetogargetable:[],

    };
  },
  created () {
    this.handleNodeClick_tree()
    this.initdatabase_in_warehouse()
  },

 methods:
    {
        handleClick(tab, event) {
          console.log(tab, event);
        },
        //树形节点的点击事件
        handleNodeClick(h,node) {
        let vm=this;
        console.log(node);
        console.log(node.data.id);
        console.log(node.level);
        if(node.level==1){
          vm.breadData1=[
          {
            value:node.data.label
          }]
        }
        if(node.level==2){
          vm.breadData1=[
          {
            value:node.parent.data.label
          },{
            value:node.data.label
          }]
        }
        if(node.level==3){
          vm.breadData1=[
          {
            value:node.parent.parent.data.label
          },
          {
            value:node.parent.data.label
          },{
            value:node.data.label
          }]
        }

        if(node.level==4){
          vm.breadData1=[
          {
            value:node.parent.parent.parent.data.label
          },
          {
            value:node.parent.parent.data.label
          },
          {
            value:node.parent.data.label
          },
          {
            value:node.data.label
          },

          ];
          console.log(vm.breadData1);

          vm.tableID=node.data.id;
          let params={
            id:node.data.id
          }
          axios.post('/kettleMetadataCollect/getMetadataTable',params)

          .then(function(response){
            console.log(response);
            console.log(response.data.data);
            vm.tableData1=response.data.data;
          })
          .catch(function(error){
            console.log(error);
          })
          axios.post('/kettleMetadataCollect/getMetadataTableField',params, {headers: {'content-type': 'application/json'}})
          //http://116.62.196.234:8080/MT/sourcesystem/getAllSourcesystems
          .then(function (response) {
          console.log(response);

          console.log(response.data.data);
          vm.attributeData = response.data.data;
          })
          .catch(function (error) {
          console.log(error);
          })
         }
        },
        //console.log(data);
        //树形数据的初始化
        handleNodeClick_tree(data) {
          console.log(data);
          let vm = this
          axios.get('/sourcesystem/getFourMetamodelHierarchyList')
          //http://116.62.196.234:8080/MT/sourcesystem/getAllSourcesystems
          .then(function (response) {
          console.log(response);
          console.log(response.data);
          vm.treedata = response.data.data;
          })
          .catch(function (error) {
          console.log(error);
          });
        },

        //浏览表编辑按钮
        edit (row) {
         console.log(row) ;
         let vm = this;
         //编辑对话框显示
         vm.dialogFormVisible = true;
        //清空相关数据
         vm.form.fieldid=row.id;
         vm.form.fieldname=row.fieldname;
         vm.form.serviceDescription= row.describe;
         },

        //浏览表删除按钮
        deletefield(row){
          let vm=this;
          //删除对话框显示
          vm.dialogFormVisible1 = true;
          vm.deleteform.fieldID=row.id;
        },
        //浏览表编辑框填好确认
        editAtrributePost(){
          let vm=this;
          console.log(vm.form);
          let params={
            id:vm.form.fieldid,
            describe:vm.form.serviceDescription
          }
          //修改相关属性
          axios.post('/kettleMetadataCollect/updateDescribe',params, {headers: {'content-type': 'application/json'}})
          .then(function(response){
            console.log("属性修改");
            console.log(response);
            console.log(response.data.result);
            vm.dialogFormVisible2=true;
            if(response.data.result==true){

              vm.information="属性描述修改成功";
            }
            else{
              vm.information="属性描述修改失败";

            }
          })
          .catch(function(error){
            console.log(error);
          })
        },
        //删除确认提交
        deletefieldPost(){
          let vm=this;
          let params={
            id:vm.deleteform.fieldID
          }
          axios.post('/kettleMetadataCollect/deleteMetadata',params, {headers: {'content-type': 'application/json'}})
          .then(function(response){
            console.log("属性删除提交");
            console.log(response);
            console.log(response.data.result);
            vm.dialogFormVisible2=true;
            if(response.data.result==true){

              vm.information="属性删除成功";
            }
            else{
              vm.information="属性删除失败";

            }
          })
          .catch(function(error){
            console.log(error);
          })
        },
        //编辑或删除完更新此表
        updateTable(){
          let vm=this;
          vm.dialogFormVisible=false;
          vm.dialogFormVisible1=false;
          vm.dialogFormVisible2=false;
          let params={
            id:vm.tableID
          }
          //更新属性表
          axios.post('/kettleMetadataCollect/getMetadataTableField',params, {headers: {'content-type': 'application/json'}})
          //http://116.62.196.234:8080/MT/sourcesystem/getAllSourcesystems
          .then(function (response) {
          console.log(response);
          console.log(response.data.data);
          vm.attributeData = response.data.data;
          })
          .catch(function (error) {
          console.log(error);
          })
        },

        //查询提交
        selectPost(){
        let vm=this;
        console.log(vm.selectinfo);
         if(vm.selectinfo==""){
          vm.$message('请输入关键字');
         }else{
          let params={
            name:vm.selectinfo
          }
          axios.post('/kettleMetadataCollect/searchMetadataTable',params, {headers: {'content-type': 'application/json'}})
          //http://116.62.196.234:8080/MT/sourcesystem/getAllSourcesystems
          .then(function (response) {
          console.log(response.data.result);
          console.log(response.data.data);
          if(response.data.result==true)
            {
                vm.selectTable=response.data.data;
            }
          else
            {
                vm.dialogFormVisible4=true;
                vm.warning="查询失败";
            }
          })
          .catch(function (error) {
          console.log(error);
          })
         }
        },
        //详情
        detail(row){
          let vm=this;
          vm.flag=row.flag;
          vm.metaid=row.id;
          console.log("详情ID");
          console.log(row.id);
          console.log(row.flag);
          let params={
            flag:row.flag,
            id:row.id
          }
          axios.post('/kettleMetadataCollect/getMetadataByIdAndFlag',params, {headers: {'content-type': 'application/json'}})
          //http://116.62.196.234:8080/MT/sourcesystem/getAllSourcesystems
          .then(function (response) {
            console.log(response.data);
            if(response.data.result==true){
            vm.dialogFormVisible5=true;
            vm.tableData2=response.data.data;
            }else{
              vm.dialogFormVisible4=true;
              vm.warning="详情获取失败";
            }
          })
          .catch(function (error) {
          console.log(error);
          })
        },

        selectEditPost(){
          let vm=this;
          console.log("修改");
          console.log(vm.flag);
          console.log(vm.metaid);
          console.log(vm.selectEditForm.serviceDescription);
          let params={
            flag:vm.flag,
            id:vm.metaid,
            describe:vm.selectEditForm.serviceDescription
          }
          axios.post('/kettleMetadataCollect/updateMetadataByIdAndFlag',params, {headers: {'content-type': 'application/json'}})
          //http://116.62.196.234:8080/MT/sourcesystem/getAllSourcesystems
          .then(function (response) {
            console.log(response.data);
            vm.dialogFormVisible4=true;
            if(response.data.result==true){
              vm.warning="修改成功·";
            }else{
              vm.warning="修改失败";
            }
          })
          .catch(function (error) {
          console.log(error);
          })
        },

        selectUpdate(){
          let vm=this;
          vm.dialogFormVisible4=false;
          vm.dialogFormVisible5=false;
          vm.dialogFormVisible6=false;
          vm.dialogFormVisible7=false;
          vm.selectEditForm.serviceDescription="";

          console.log("更新ID");
          console.log(vm.metaid);
          console.log(vm.flag);
          let params={
            name:vm.selectinfo
          }
          axios.post('/kettleMetadataCollect/searchMetadataTable',params, {headers: {'content-type': 'application/json'}})
          //http://116.62.196.234:8080/MT/sourcesystem/getAllSourcesystems
          .then(function (response) {
          console.log(response.data.result);
          console.log(response.data.data);
          if(response.data.result==true)
            {
                vm.selectTable=response.data.data;
            }
          else
            {
                vm.dialogFormVisible4=true;
                vm.warning="数据更新失败";
            }
          })
          .catch(function (error) {
          console.log(error);
          })

        },
        selectDeletePost(){
          let vm=this;
          console.log("删除");
          console.log(vm.metaid);
          console.log(vm.flag);
          let params={
            id:vm.metaid,
            flag:vm.flag
          }
          axios.post('/kettleMetadataCollect/deleteMetadataByIdAndFlag',params, {headers: {'content-type': 'application/json'}})
          //http://116.62.196.234:8080/MT/sourcesystem/getAllSourcesystems
          .then(function (response) {
          console.log(response.data.result);
          console.log(response.data.data);
          vm.dialogFormVisible4=true;
          if(response.data.result==true)
            {
                vm.warning="删除成功";
            }
          else
            {
                vm.warning="删除失败";
            }
          })
          .catch(function (error) {
          console.log(error);
          })
        },
        //表内删除
        selectDeleteSingle(row){
          let vm=this;
          vm.metaid=row.id;
          vm.flag=row.flag;
          vm.dialogFormVisible6=true;
        },



        //添加模块的方法部分



         initdatabase_in_warehouse() {
        // console.log(data);
          let vm = this
           vm.tableID=2;
          let params = {
             id: vm.tableID,
          }
          axios.post('/datasource_connectinfo/getDatabaseName',params)
          //http://116.62.196.234:8080/MT/sourcesystem/getAllSourcesystems
          .then(function (response) {
            console.log(response);
            console.log(response.data.data);
            vm.database_in_warehouse = response.data.data;
          })
          .catch(function (error) {
            console.log(error);
          });
      },

      showtables_in_database() {
        // console.log(data);
          let vm = this
          let params = {
             id: vm.databaseinwarehouse,
          }
          console.log(vm.databaseinwarehouse);
          axios.post('/datasource_connectinfo/getTables',params)
          //http://116.62.196.234:8080/MT/sourcesystem/getAllSourcesystems
          .then(function (response) {
            console.log(response);
            console.log(response.data.data);
            vm.database_table = response.data.data;
          })
          .catch(function (error) {
            console.log(error);
          });
      },

      //展示数据库表中的的字段
      showtFields_in_table() {
        // console.log(data);
          let vm = this
          let params = {
             id: vm.databasetable,
          }
          axios.post('/datasource_connectinfo/getFields',params)
          .then(function (response) {
            console.log(response);
            console.log(response.data.data);
            //赋给的值待定
            vm.soursetogargetable = response.data.data;
          })
          .catch(function (error) {
            console.log(error);
          });
      },

      //获取示例方法
      showField_in_sourceTableExemple() {
        // console.log(data);
          let vm = this
           vm.dialogTable_Visible=true;
          let params = {
             datasourceid:vm.formdata.source_database,
             tableid:vm.formdata.source_table,
             fieldid:vm.formdata.source_property,
          }
          axios.post('/datasource_connectinfo/getData',params)
          .then(function (response) {
            console.log(response);
            console.log(response.data.data);
            //赋给的值待定
            vm.ExempleGridData = response.data.data;

          })
          .catch(function (error) {
            console.log(error);
          });
      },








        handleEdit(index, row) {
          // 写一个Dialog的显示

             console.log(index, row);
             let vm=this;
             //数据仓库中的字段信息进行更新

              vm.formdata.propertyname=row.propertyname;
              vm.formdata.servicename=row.servicename
              vm.dialog_in_FormVisible=true;

          axios.get('/sourcesystem/getTargetSystem')
          .then(function (response) {
            console.log(response);
            console.log(response.data.data);
            //赋给的值待定
            vm.source_system = response.data.data;
          })
          .catch(function (error) {
            console.log(error);
          });

          },

/*============================================================================
          showfield_in_sourcetable(){
              let vm=this;
              let params = {
             id: vm.databasetable,

          }
          axios.post('/datasource_connectinfo/getFields',params)
          .then(function (response) {
            console.log(response);
            console.log(response.data.data);
            //赋给的值待定
            vm.database_table = response.data.data;
          })
          .catch(function (error) {
            console.log(error);
          });
          },*/

          showsource_in_source(){
               let vm=this;
              let params = {
             id: vm.formdata.source_system,

          }
          axios.post('/datasource_connectinfo/getConnectinfoBySystem',params)
          .then(function (response) {
            console.log(response);
            console.log(response.data.data);
            //赋给的值待定
            vm.source_datasource = response.data.data;
          })
          .catch(function (error) {
            console.log(error);
          });
          },


          showdatabase_in_sourcedata(){
               let vm=this;
              let params = {
             id: vm.formdata.source_datasource,
          }
          axios.post('/datasource_connectinfo/getDatabaseName',params)
          .then(function (response) {
            console.log(response);
            console.log(response.data.data);
            //赋给的值待定
            vm.source_database = response.data.data;
          })
          .catch(function (error) {
            console.log(error);
          });
          },


          showdatatable_in_sourcedata(){
               let vm=this;
              let params = {
             id: vm.formdata.source_database,
          }
          axios.post('/datasource_connectinfo/getTables',params)
          .then(function (response) {
            console.log(response);
            console.log(response.data.data);
            //赋给的值待定
            vm.source_table = response.data.data;
          })
          .catch(function (error) {
            console.log(error);
          });
          },

          showdatafield_in_sourcedata(){
               let vm=this;
              let params = {
             id: vm.formdata.source_table,
          }
          axios.post('/datasource_connectinfo/getFields',params)
          .then(function (response) {
            console.log(response);
            console.log(response.data.data);
            //赋给的值待定
            vm.source_property = response.data.data;
          })
          .catch(function (error) {
            console.log(error);
          });
          },

          showdatadeclibse_in_sourcedata(sourcefiledescribe){
               let vm=this;
              let params = {
             id: vm.formdata.source_property,
          }
          axios.post('/datasource_connectinfo/getDescribe',params)
          .then(function (response) {
            console.log(response);
            console.log(response.data.data);
            //赋给的值待定
            vm.sourcefiledescribe = response.data.data.describe;
            console.log(vm.sourcefiledescribe);
          })
          .catch(function (error) {
            console.log(error);
          });
          },

          //示例展示，
          showdataexemple_in_sourcedata(){
               let vm=this;
              let params = {

             id: vm.formdata.source_property,
          }
          axios.post('/datasource_connectinfo/getDescribe',params)
          .then(function (response) {
            console.log(response);
            console.log(response.data.data);
            //赋给的值待定
            vm.sourcefiledescribe = response.data.data.describe;
            console.log(vm.sourcefiledescribe);
          })
          .catch(function (error) {
            console.log(error);
          });
          },


            //添加字段映射的方法
          startOperationMapper(){
              let vm=this;
              vm.dialog_in_FormVisible=false;
              let params = {
             srctableid:vm.databasetable,
             srcfieldid:vm.formdata.source_property,
             targettableid:vm.formdata.databasetable,
             targetfieldid:vm.formdata.propertyname,
          }

          axios.post('/metadata_tablemapping/insertMapping',params)
          .then(function (response) {
            console.log(response);
            console.log(response.data.data);
          })
          .catch(function (error) {
            console.log(error);
          });
          },


        addtablemap (){
            this.$router.push({ name: '添加关系表字段映射' });
        }
    }

};
</script>

<style scoped>
.des{
  font-size: 16px;

}
.el-tabs_header {
  margin: 0;

}
/* .borderStyle {
  border-bottom: 1px solid #d7dde4;
  border-left: 1px solid #d7dde4;
  border-right: 1px solid #d7dde4;
  margin-top: 15px;
} */
.layout{

    background: #fff;
    position: relative;
    height: 100%;
}
.layout-breadcrumb{
    padding: 10px 15px 0;
}
.layout-content{
    min-height: 200px;
    margin: 15px;
    overflow: hidden;

    border-radius: 4px;
}
.layout-content-main{

    padding: 10px;
    margin-left:2%;


}
.layout-copy{
    text-align: center;
    padding: 10px 0 20px;
    color: #9ea7b4;
}
.layout-menu-left{


}
.el-tree{

 background: #EEE9E9;


}
.layout-header{
    height: 60px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
.layout-tablefirst{
  margin-top:5px;

}
.layout-tablesecond{
 margin-top:2%;
 min-height: 100px;

}
.layout-tree-button{
 margin-left: 15%;
}
.selectkey{
margin-top: 1%;
 margin-left: 10%;
}
.layout-select{

}
.layout-select-table{
 margin-top: 1%;
 margin-left: 10%;
}

.addtablehead_font_style{
  font-size: 22px;
}
.addtablemap_font_style{
  font-size: 16px;
  margin-left:40px;
}
/*.breadcrumb {
  margin-top: 10px;
}*/
.elTree {
  font-size: 16px;
  background-color: #EBEEF5;
}
.breadcrumb {
  margin-top: 10px;
  margin-bottom:10px;
}
.buttonGroup{
  margin-top: 10px;
}
.decorationLine{
height:1px;
width:100%;
background:#E4E7ED;
overflow:hidden;
margin-top:20px;
margin-bottom:20px;
}
.dataSource{
  background-color: #EBEEF5;
  height:355px;
  overflow-y: scroll;
}
.layout-right {
  height:400px;
  overflow-y: scroll;
  overflow-x: hidden;
}

/*.layout-logo-left{
    width: 90%;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    margin: 15px auto;
}*/

</style>
